<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ItemGood</title>

</head>
<body>
<div id="app">
<div id="toolbar">
    <a class="btn" href="javascript:;" @click="adduser"><i class="fa fa-plus"></i> 添加分类</a>
    <a class="btn" href="javascript:;" onclick=""><i class="fa fa-edit"></i> 编辑分类</a>
    <a class="btn" href="javascript:;" onclick="deletemethod()"><i class="fa fa-trash-o"></i>删除分类</a>
</div>
<table id="table"></table>


</div>


<script src="../../plugins/boostrap-table/bootstrap-table.js" ></script>
<script src="/dist/layer/layer.js" ></script>

<!-- Latest compiled and minified CSS -->
<!--<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">-->

<!-- Latest compiled and minified JavaScript -->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>-->

<script src="../../plugins/boostrap-table/locale/bootstrap-table-zh-CN.js" ></script>
<script type="text/javascript">

    var $table = $('#table');
    var vm = new Vue({
        el: '#app',
        methods:{
            adduser:function(obj){
                console.info(obj);
                var select = $table.bootstrapTable('getSelections');
                console.info(select.length);
            },
            update:function(){
                console.info("update ")
            }
        },
        mounted:function(){

            $table = $("#table");

            $table.bootstrapTable({
                url: '../../item/l?id=1',

                method: 'POST',
                striped: true,
                height:getheight(),
                search: true,
                searchOnEnterKey: true,
                showRefresh: true,
                showToggle: true,
                showColumns: true,
                minimumCountColumns: 2,
                showPaginationSwitch: true,
                clickToSelect: true,
                pagination: true,
                paginationLoop: false,
                //classes: 'table table-hover table-no-bordered',
                sidePagination: 'server',
                queryParams:queryParams,
                //silentSort: false,
                smartDisplay: true,
                idField: 'id',
                sortName: 'id',
                sortOrder: 'desc',
                toolbar: '#toolbar',
                columns: [
                    {field: 'state', checkbox: true},
                    {field: 'id', title: '编号', sortable: true, halign: ''},
                    {field: 'itemName', title: '分类名称', sortable: true, halign: ''},
                    {field: 'itemDesc', title: '分类描述', sortable: true, halign: ''},
                    {field: 'ctime', title: '创建时间', sortable: true, halign: ''},
                    {field: '', title: '操作', halign: 'center',formatter:function(){
                        return " <a href='#' class='btn btn-info btn-sm margin-r-5' >修改</a><a href='#' class='btn btn-info btn-sm margin-r-5' >删除</a>"
                    }}

                ]
            });
        }
    });




    /**查询条件与分页数据 */
    function queryParams(pageReqeust) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit : pageReqeust.limit,   //页面大小
            offset : pageReqeust.offset,  //页码
            sort : pageReqeust.sort,
            order : pageReqeust.order,
            object: [],
            //statu: $("#txt_search_statu").val()
        };
        return JSON.stringify(temp);
    }


    function deletemethod(){
        var select = $table.bootstrapTable('getSelections');
        if(select.length >= 1){
            layer.msg("成功删除")
            //console.info(select[0].id);
            //$table.bootstrapTable("remove",{field: 'id', values:  select[0].id});
            for(var i = 0 ;i<select.length;i++){
                vm.$http.get('/item/d/' + select[i].id).then(function(resp){console.info(resp.body)});
            }

            //vm.$http.get('/item/d/' + select[0].id);
            //$.get('/item/d/' + select[0].id);
            $table.bootstrapTable('refresh');
        }else {
            layer.alert("请选择一条记录删除",{"icon": 2  })
        }
        //console.info(select.length);
    }

    function getheight(){
        var tableheight = $(window).height() - 288;
        return tableheight;
    }

</script>
</body>
</html>